@import "partials/variables";
@import "partials/mixin";

html, body {
  height: 100%;
}

// 两种语法:
// SCSS (Sassy CSS)
// sass (Syntactically Awesome Style Sheets)

// 嵌套
.tetris {
  // 引用父选择符 &
  &.game-holder {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    &:after {
      display: table;
      content: '';
      clear: both;
    }
    &:hover {
      outline: none;
    }
    body.hide & {
      display: none;
    }
  }
  .canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: black;
  }
  // 嵌套属性
  .score-holder,
  .start-holder {
    position: absolute;
    font: 14px/1.5 {
      family: Arial;
      size: 24px;
      weight: bold;
    }
  }
}

// 注释
// 单行注释
/*-
   多行注释
-*/
/*! When the first letter of a comment is !, the comment will be interpolated and always rendered into css output even in compressed output modes. */

// 变量 $
$width: 5em;
#main {
  width: $width;
}
// 变量作用域

// 数据类型
/*
 SassScript 支持7种主要的数据类型：
 数字（例如 1.2、13、10px）
 文本字符串，无论是否有引号（例如 "foo"、'bar'、baz）
 颜色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）
 布尔值（例如 true、false）
 空值（例如 null）
 值列表，用空格或逗号分隔（例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif）
 maps from one value to another (e.g. (key1: value1, key2: value2))
 */
//多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
// $px: 5px 10px 20px 30px;
// $heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

// 等式运算 (== and !=)
// 关系运算（<、>、<=、>=）
// 数字运算
// SassScript 支持数字的标准运算（加 +、减 -、乘 *、除 /和取模 %），并且，如果需要的话，也可以在不同单位间做转换：
// 颜色运算 #010203 + #040506 : 计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09 并且被合成为 #050709
// 字符串运算: + 运算符可以用来连接字符串
// 布尔运算 and、or 和 not 运算

// 圆括号: 圆括号可以用来改变运算顺序：(1em + 2em) * 3;
// 函数: SassScript 定义了一些有用的函数， 这些函数可以像普通 CSS 函数语法一样被调用：hsl(0, 100%, 50%)
// 关键词参数: Sass 函数允许指定明确的关键词参数 (keyword arguments) 进行调用: hsl($hue: 0, $saturation: 100%, $lightness: 50%);

// Interpolation: #{} 把变量替换成纯文本输出
// 变量默认值： !default 你可以在变量尚未赋值前，通过在值的末尾处添加 !default 标记来为其指定。
// 如果该变量已经被赋值， 就不会再次赋值， 但是，如果还没有被赋值，就会被指定一个值。

// @ 规则和指令
// @import @media @extend
// @import
/* If the file’s extension is .css.
   If the filename begins with http://.
   If the filename is a url().
   If the @import has any media queries. */
// @import "rounded-corners", "text-shadow";
// Partials: _colors.scss: @import "colors";
// Nested @import:
/* #main {
   @import "example";
} */

// @if @for @each @while
// @mixin @include @content
// @function

// bootstrap


// Tetris Game Style
/*---------------------*/
.tetris {
  &.game-holder {
    position: relative;
    padding: 0;
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 140%;
  }
  /* Touch Controls */
  .touch {
    position: absolute;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 100%;
    border: 1px solid white;
    background: rgba(255,255,255,0.2);
    z-index: 10;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 50px;
    text-align: center;
    &:active {
      background: rgba(255,255,255,0.3);
    }
  }
  .touch-left {
    left: -60px;
    bottom: 10px;
    &::after {
      content: "<";
    }
  }
  .touch-right {
    right: -60px;
    bottom: 10px;
    &:after {
      content: ">";
    }
  }
  .touch-rotate-left {
    left: -60px;
    bottom: 80px;
    &::after {
      content: "<o";
    }
  }
  .touch-rotate-right {
    right: -60px;
    bottom: 80px;
    &::after {
      content: "o>";
    }
  }
  .touch-drop {
    left: 50%;
    margin-left: -25px;
    bottom: -60px;
    &::after {
      content: ".";
    }
  }
  /* Buttons */
  .btn {
    position: relative;
    display: inline-block;
    background: none;
    color: #ffffff;
    text-decoration: none;
    border: 2px solid #ffffff;
    padding: 15px 30px;
    font-size: 18px;
    text-align: center;
    cursor: default;
    &::before {
      position: absolute;
      content: "";
      top: 100%;
      left: 0px;
      bottom: 0px;
      right: 0px;
      border: 2px solid #ffffff;
      border-top: none;
      border-right: none;
      transition: all 0.2s ease;
    }
    &::after {
      position: absolute;
      content: "";
      top: 0px;
      left: 100%;
      bottom: 0px;
      right: 0px;
      border: 2px solid #ffffff;
      border-left: none;
      border-bottom: none;
      transition: all 0.2s ease;
    }
    &:hover::before {
      left: 5px;
      bottom: -8px;
      right: -8px;
    }
    &:hover::after {
      top: 5px;
      bottom: -8px;
      right: -8px;
    }
  }

  /* Score */
  .score-holder {
    position: absolute;
    top: 20px;
    right: 20px;
    text-align: right;
  }
  .score-msg {
    font-size: 14px;
    line-height: 100%;
    margin-bottom: 0.2em;
  }
  .score-num {
    font-size: 20px;
    font-weight: bold;
  }
  /* Menu */
  .start-holder,
  .game-over-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    text-align: center;
  }
  .start,
  .game-over {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
  }
  .start-msg,
  .game-over-msg {
    font-size: 18px;
    margin-bottom: 30px;
  }
}